<!DOCTYPE html>
<html>
	<meta charset="UTF-8"/>
    <body>
    	<p>
		使用script或template标签<br />
		尽管语法糖简化了组件注册，但在template选项中拼接HTML元素比较麻烦，这也导致了HTML和JavaScript的高耦合性。<br />
		庆幸的是，Vue.js提供了两种方式将定义在JavaScript中的HTML模板分离出来。<br />
    	</p>
        <div id="app">
            <my-component></my-component>
        </div>
        
        <script type="text/x-template" id="myComponent">
            <div>This is a component!</div>
        </script>
        <p>
        	template选项现在不再是HTML元素，而是一个id，Vue.js根据这个id查找对应的元素，
        	然后将这个元素内的HTML作为模板进行编译。
        	
        	注意：使用<script>标签时，type指定为text/x-template，意在告诉浏览器这不是一段js脚本，
        	浏览器在解析HTML文档时会忽略<script>标签内定义的内容。
        </p>
    </body>
    <script src="../js/vue.js"></script>
    <script>
        
        Vue.component('my-component',{
            template: '#myComponent'
        })
        
        new Vue({
            el: '#app'
        })
        
    </script>
</html>